<template>
  <div>
    <div class="page__header">
      <button class="page__header-btn-back" @click="$router.go(-1)"></button>
      能源充电日报专题
      <router-link
        tag="button"
        class="page__header-btn-chart"
        :to="{name: 'ReportFormChargeForm', query:{selectDate: datePicker.selectDate, selectArea: areaInfo.selectId} }"
      >报表</router-link>
    </div>
    <div class="page__main bg-white">
      <div class="page__scroller" ref="main">
        <div class="water-mark-wrap">
          <div class="title-bg" id="headTitle">
            {{datePicker.showData}}能源充电日报专题
            <div class="title-tip">（能源充电日报数据均来源于能源系统，与能源系统出具的日报数据保持一致）</div>
          </div>
          <van-sticky :offset-top="46">
            <div class="selects-wrap">
              <span class="top-menu" @click="menus.show = true">目录</span>
              <div class="selects">
                <div class="selects__item" @click="datePicker.show = true">
                  {{datePicker.showData}}
                </div>
                <div class="selects__item" @click="areaInfo.show = true">
                  {{areaInfo.showArea}}
                </div>
              </div>
            </div>
          </van-sticky>
          <div class="pd-aside">
            <div class="mgb-8" id="a">
              <div class="charge-title">
                <i class="charge-title__num"><span>1</span></i>
                端口规模
                <button type="button" class="charge-title__btn" @click="handleTipDialogShow('a')"></button>
              </div>
              <div class="charge-panel">
                <div
                  class="charge-panel__item"
                  v-for="(item, index) in port"
                  :key="index"
                  :class="'charge-panel__item--' + item.icon"
                >
                  <div class="charge-panel__parts">
                    <div class="charge-panel__part">{{item.title}}</div>
                    <div class="charge-panel__part charge-panel__part--none">
                      <van-loading size="14px" v-show="chargingDayLoading"></van-loading>
                      <span class="charge-panel__num">{{numFormat(item.num)}}</span>
                      <span class="charge-panel__unit">{{item.unit}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mgb-8" id="b">
              <div class="charge-title">
                <i class="charge-title__num"><span>2</span></i>
                端口使用情况
                <button type="button" class="charge-title__btn" @click="handleTipDialogShow('b')"></button>
              </div>
              <div class="charge-panel">
                <div
                  class="charge-panel__item"
                  v-for="(item, index) in portSum"
                  :key="index"
                  :class="'charge-panel__item--' + item.icon"
                >
                  <div class="charge-panel__parts">{{item.title}}</div>
                  <div class="charge-panel__parts charge-panel__info">
                    <div class="charge-panel__part">
                      <van-loading size="14px" v-show="chargingDayLoading"></van-loading>
                      <span class="charge-panel__num">{{numFormat(item.num)}}</span>
                      <span class="charge-panel__unit">{{item.unit}}</span>
                    </div>
                    <div class="charge-panel__part charge-panel__part--none">
                      环比
                      <van-loading size="14px" v-show="chargingDayLoading"></van-loading>
                      <span class="trend" :class="item.percentage > 0 ? 'trend--asc': 'trend--desc'">{{item.percentage}}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mgb-8" id="c">
              <div class="charge-title">
                <i class="charge-title__num"><span>3</span></i>
                注册客户
                <button type="button" class="charge-title__btn" @click="handleTipDialogShow('c')"></button>
              </div>
              <div class="charge-panel">
                <div
                  class="charge-panel__item"
                  v-for="(item, index) in user"
                  :key="index"
                  :class="'charge-panel__item--' + item.icon"
                >
                  <div class="charge-panel__parts">
                    <div class="charge-panel__part">{{item.title}}</div>
                    <div class="charge-panel__part charge-panel__part--none">
                      <van-loading size="14px" v-show="chargingDayLoading"></van-loading>
                      <span class="charge-panel__num">{{numFormat(item.num)}}</span>
                      <span class="charge-panel__unit">{{item.unit}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mgb-8" id="d">
              <div class="charge-title">
                <i class="charge-title__num"><span>4</span></i>
                使用用户
                <button type="button" class="charge-title__btn" @click="handleTipDialogShow('d')"></button>
              </div>
              <div class="charge-panel">
                <div
                  class="charge-panel__item"
                  v-for="(item, index) in avatar"
                  :key="index"
                  :class="'charge-panel__item--' + item.icon"
                >
                  <div class="charge-panel__parts">
                    <div class="charge-panel__part">{{item.title}}</div>
                    <div class="charge-panel__part charge-panel__part--none">
                      <van-loading size="14px" v-show="chargingDayLoading"></van-loading>
                      <span class="charge-panel__num">{{numFormat(item.num)}}</span>
                      <span class="charge-panel__unit">{{item.unit}}</span>
                    </div>
                  </div>
                  <div class="charge-panel__parts charge-panel__info" v-if="item.percentage">
                    <div class="charge-panel__part"><span class="charge-panel__tip">环比</span></div>
                    <div class="charge-panel__part charge-panel__part--none">
                      <van-loading size="14px" v-show="chargingDayLoading"></van-loading>
                      <span class="trend" :class="item.percentage > 0 ? 'trend--asc': 'trend--desc'">{{item.percentage}}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mgb-8" id="e">
              <div class="charge-title">
                <i class="charge-title__num"><span>5</span></i>
                充电情况
                <button type="button" class="charge-title__btn" @click="handleTipDialogShow('e')"></button>
              </div>
              <div class="charge-panel">
                <div
                  class="charge-panel__item"
                  v-for="(item, index) in electric"
                  :key="index"
                  :class="'charge-panel__item--' + item.icon"
                >
                  <div class="charge-panel__parts">
                    <div class="charge-panel__part">{{item.title}}</div>
                    <div class="charge-panel__part charge-panel__part--none">
                      <van-loading size="14px" v-show="chargingDayLoading"></van-loading>
                      <span class="charge-panel__num">{{numFormat(item.num)}}</span>
                      <span class="charge-panel__unit">{{item.unit}}</span>
                    </div>
                  </div>
                  <div class="charge-panel__parts charge-panel__info">
                    <div class="charge-panel__part"><span class="charge-panel__tip">环比</span></div>
                    <div class="charge-panel__part charge-panel__part--none">
                      <van-loading size="14px" v-show="chargingDayLoading"></van-loading>
                      <span class="trend" :class="item.percentage > 0 ? 'trend--asc': 'trend--desc'">{{item.percentage}}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mgb-8" id="f">
              <div class="charge-title">
                <i class="charge-title__num"><span>6</span></i>
                运营情况
              </div>
              <div>
                <i class="icon-top"></i>
                <slot v-if="roleType == 'all'">本日运营端口数-全国省分排名情况TOP10</slot>
                <slot v-if="roleType == 'province'">本日运营端口数-本省全国排名情况</slot>
              </div>
              <div :style="{height: portRank.showAll == false ? '140px' : 'auto', overflow: 'hidden'}">
                <RankList :data="portRank.barData"></RankList>
              </div>
              <div class="show-more" @click="handleSpread('portRank')" v-show="portRank.barData.data.length > 3">
                {{portRank.showAll == false ? '查看更多' : '折叠'}}
              </div>
              <div>
                <i class="icon-top"></i>
                <slot v-if="roleType == 'all'">本日活跃用户数-全国省分排名情况TOP10</slot>
                <slot v-if="roleType == 'province'">本日活跃用户数-本省全国排名情况</slot>
              </div>
              <div :style="{height: activeUser.showAll == false ? '140px' : 'auto', overflow: 'hidden'}">
                <RankList :data="activeUser.barData"></RankList>
              </div>
              <div class="show-more" @click="handleSpread('activeUser')" v-show="portRank.barData.data.length > 3">
                {{activeUser.showAll == false ? '查看更多' : '折叠'}}
              </div>
              <div><i class="icon-label"></i>充电收入</div>
              <van-tabs class="init-tabs mgb-15" v-if="roleType == 'all'" @change="handleTabClick">
                <van-tab name="electricA" title="整体情况">
                  <div class="chart-wrap">
                    <BarChart :data="electricTab.barData"></BarChart>
                    <div class="chart-wrap__loading" v-show="barLoading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
                <van-tab name="electricB" title="日变化趋势">
                  <div class="chart-wrap">
                    <LineChart :data="electricTab.lineData"></LineChart>
                    <div class="chart-wrap__loading" v-show="lineLoading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
              <div class="mgb-15" v-if="roleType == 'province'">
                <div class="align-center">日变化趋势</div>
                <div class="chart-wrap">
                  <LineChart :data="electricTab.lineData"></LineChart>
                  <div class="chart-wrap__loading" v-show="lineLoading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </div>
              <div><i class="icon-label"></i>本日新增端口数</div>
              <van-tabs class="init-tabs mgb-15" v-if="roleType == 'all'" @change="handleTabClick">
                <van-tab name="portA" title="整体情况">
                  <div class="chart-wrap">
                    <BarChart :data="portTab.barData"></BarChart>
                    <div class="chart-wrap__loading" v-show="barLoading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
                <van-tab name="portB" title="日变化趋势">
                  <div class="chart-wrap">
                    <LineChart :data="portTab.lineData"></LineChart>
                    <div class="chart-wrap__loading" v-show="lineLoading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
              <div class="mgb-15" v-if="roleType == 'province'">
                <div class="align-center">日变化趋势</div>
                <div class="chart-wrap">
                  <LineChart :data="portTab.lineData"></LineChart>
                  <div class="chart-wrap__loading" v-show="lineLoading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </div>
              <div><i class="icon-label"></i>本日新增注册客户数</div>
              <van-tabs class="init-tabs mgb-15" v-if="roleType == 'all'" @change="handleTabClick">
                <van-tab name="userA" title="整体情况">
                  <div class="chart-wrap">
                    <BarChart :data="userTab.barData"></BarChart>
                    <div class="chart-wrap__loading" v-show="barLoading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
                <van-tab name="userB" title="日变化趋势">
                  <div class="chart-wrap">
                    <LineChart :data="userTab.lineData"></LineChart>
                    <div class="chart-wrap__loading" v-show="lineLoading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
              <div class="mgb-15" v-if="roleType == 'province'">
                <div class="align-center">日变化趋势</div>
                <div class="chart-wrap">
                  <LineChart :data="userTab.lineData"></LineChart>
                  <div class="chart-wrap__loading" v-show="lineLoading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </div>
              <div><i class="icon-label"></i>本月累计使用用户数</div>
              <van-tabs class="init-tabs mgb-15" v-if="roleType == 'all'" @change="handleTabClick">
                <van-tab name="avatarA" title="整体情况">
                  <div class="chart-wrap">
                    <BarChart :data="avatarTab.barData"></BarChart>
                    <div class="chart-wrap__loading" v-show="barLoading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
                <van-tab name="avatarB" title="日变化趋势">
                  <div class="chart-wrap">
                    <LineChart :data="avatarTab.lineData"></LineChart>
                    <div class="chart-wrap__loading" v-show="lineLoading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
              <div class="mgb-15" v-if="roleType == 'province'">
                <div class="align-center">日变化趋势</div>
                <div class="chart-wrap">
                  <LineChart :data="avatarTab.lineData"></LineChart>
                  <div class="chart-wrap__loading" v-show="lineLoading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="go-top" v-show="goTopBtn.show" @click="goTop"></div>
          <WaterMark :length="16"></WaterMark>
        </div>
      </div>
    </div>
    <van-popup
      v-model="menus.show"
      position="left"
      :style="{height: '100%', width: '230px' }"
    >
      <div class="page-menus">
        <div class="page-menus__title">目录</div>
        <div
          class="page-menus__item"
          v-for="(item, index) in menus.list"
          :key="index"
          @click="anchorJump(item.key)">
          <i>{{index + 1}}.</i>{{item.name}}
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model="datePicker.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="datePicker.currentDate"
        type="date"
        :min-date="datePicker.minDate"
        :max-date="datePicker.maxDate"
        @cancel="datePicker.show = false"
        @confirm="handleConfirmDate"
      ></van-datetime-picker>
    </van-popup>
    <van-popup
      v-model="areaInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="areaInfo.columns"
        :defaultIndex='areaInfo.defaultIndex'
        @cancel="areaInfo.show = false"
        @confirm="confirmFnProvince"
      />
    </van-popup>
    <div class="tip-dialog" v-show="tipDialog.show">
      <div class="tip-dialog__main">
        <div class="tip-dialog__header">
          指标说明
          <button type="button" class="tip-dialog__close" @click="tipDialog.show = false"></button>
        </div>
        <div class="tip-dialog__body">
          <div class="tip-dialog__list">
            <div class="tip-dialog__item" v-for="(item, index) in tipDialog.list" :key="index">
              <div class="tip-dialog__item-title">{{item.title}}</div>
              <div class="tip-dialog__item-intro" v-show="item.intro != undefined">{{item.intro}}</div>
              <div class="tip-dialog__item-detail" v-show="item.detail != undefined">{{item.detail}}</div>
            </div>
          </div>
          <div class="footer-tip">了解更多信息，请登录PC端运营数据展示系统</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import WaterMark from '@/components/WaterMark'
  import BarChart from '@/components/BarChartScroll'
  import LineChart from '@/components/LineChart'
  import RankList from './../components/RankList'
  import data from './default-data-index.js'

  export default {
    components: {
      WaterMark,
      RankList,
      BarChart,
      LineChart
    },
    data,
    methods: {
      //目录锚点定位
      anchorJump(anchor) {
        let anchorEle = document.querySelector('#' + anchor)
        if (!!anchorEle) {
          anchorEle.scrollIntoView(true)
          let scrollTop = this.$refs.main.scrollTop
          this.$refs.main.scrollTop = scrollTop - 48
        }
        this.menus.show = false
      },
      //返回顶部
      goTop() {
        let headTitle = document.querySelector('#headTitle')
        headTitle.scrollIntoView(true)
      },
      //滚动显示返回顶部按钮
      handleScroll() {
        let scrollTop = this.$refs.main.scrollTop

        if (scrollTop > 200) {
          this.goTopBtn.show = true
        } else {
          this.goTopBtn.show = false
        }
      },
      //数字初始化
      numFormat(num) {
        return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')
      },
      handleSpread(type) {
        if (type == 'portRank') {
          this.portRank.showAll = !(this.portRank.showAll)
        } else if (type == 'activeUser') {
          this.activeUser.showAll = !(this.activeUser.showAll)
        }
      },
      handleTipDialogShow(type) {
        this.tipDialog.show = true
        this.tipDialog.list = this.tipDialog[type].list
      },
      //选择日期
      handleConfirmDate(value) {
        this.datePicker.show = false
        let date = new Date(value)
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let month1 = month < 10 ? '0' + month : month
        let day1 = day < 10 ? '0' + day : day
        this.datePicker.showData = year + '年' + month + '月' + day + '日'
        this.datePicker.selectDate = year + '' + month1 + '' + day1
        this.initPage()
      },
      getMaxMinMonth() {
        function dateSplit(param) {
          let paramStr = param + ''
          let dateStr = paramStr.replace(/(.{2})/g,'$1,')
          let dateArr = dateStr.substr(0, dateStr.length - 1).split(',')
          return dateArr
        }
        return new Promise((resolve, reject) => {
          this.$http.post('/api/yearCheckIndex/maxMonth', {type: '9'}).then(data => {
            let max = data.maps[0].MAX_MONTH
            let min = data.maps[0].MIN_MONTH

            let maxYear = dateSplit(max)[0] + dateSplit(max)[1]
            let maxMonth = dateSplit(max)[2]
            let maxDay= dateSplit(max)[3]
            let minYear = dateSplit(min)[0] + dateSplit(min)[1]
            let minMonth = dateSplit(min)[2]
            let minDay= dateSplit(min)[3]
            let actualMaxMonth = parseInt(maxMonth) - 1
            let actualMinMonth = parseInt(minMonth) - 1
            let showMaxMonth = maxMonth[0] == '0' ? maxMonth[1] : maxMonth
            let showMaxDay = maxDay[0] == '0' ? maxDay[1] : maxDay

            this.datePicker.currentDate = new Date(maxYear, actualMaxMonth, maxDay)
            this.datePicker.minDate = new Date(minYear, actualMinMonth, minDay)
            this.datePicker.maxDate = new Date(maxYear, actualMaxMonth, maxDay)

            let formCharge = sessionStorage.getItem('formCharge')
            if (formCharge != null && formCharge != undefined) {
              let selectDate = JSON.parse(formCharge).selectDate
              if (selectDate != "") {
                let paramsYear = dateSplit(selectDate)[0] + dateSplit(selectDate)[1]
                let paramsMonth = dateSplit(selectDate)[2]
                let paramsDay= dateSplit(selectDate)[3]
                let showParamsMonth = paramsMonth[0] == '0' ? paramsMonth[1] : paramsMonth
                let showParamsDay = paramsDay[0] == '0' ? paramsDay[1] : paramsDay
                let actualParamsMonth = parseInt(paramsMonth) - 1

                this.datePicker.currentDate = new Date(paramsYear, actualParamsMonth, paramsDay)
                this.datePicker.showData = paramsYear + '年' + showParamsMonth + '月' + showParamsDay + '日'
                this.datePicker.selectDate = selectDate
              } else {
                this.datePicker.showData = maxYear + '年' + showMaxMonth + '月' + showMaxDay + '日'
                this.datePicker.selectDate = maxYear + '' + maxMonth + '' + maxDay
              }
            } else {
              this.datePicker.showData = maxYear + '年' + showMaxMonth + '月' + showMaxDay + '日'
              this.datePicker.selectDate = maxYear + '' + maxMonth + '' + maxDay
            }

            resolve("ok")
          })
        })
      },
      //获得地市
      getAreaInfo() {
        let params = {
          statMonth: this.datePicker.selectDate,
          areaId: '100000'
        }

        this.$http
          .post("api/yearCheckIndex/getKpiAreaInfo", params)
          .then(data => {
            //获取省会
            if (data.rows.length > 1) {
              this.areaInfo.columns = []
              data.rows.forEach(item => {
                this.areaInfo.columns.push({
                  text: item.area,
                  id: item.areaId
                })
              })
              this.areaInfo.columns.unshift({ text: "全国", id: "100000" })
              this.areaInfo.showArea = '全国'

              let formCharge = sessionStorage.getItem('formCharge')
              if (formCharge != null && formCharge != undefined) {
                this.areaInfo.columns.forEach((item, index) => {
                  if (item.id == JSON.parse(formCharge).selectArea) {
                    this.areaInfo.showArea = item.text
                    this.areaInfo.defaultIndex = index
                  }
                })
                if(this.areaInfo.selectId == '100000') {
                  this.roleType = 'all'
                } else {
                  this.roleType = 'province'
                }
              } else {
                this.areaInfo.showArea = '全国'
              }
            }
          });
      },
      confirmFnProvince(item, index) {
        if (this.areaInfo.selectId != item.id) {
          this.areaInfo.selectId = item.id
          this.areaInfo.showArea = item.text
          if(this.areaInfo.selectId == '100000') {
            this.roleType = 'all'
          } else {
            this.roleType = 'province'
            this.portRank.showAll = false
            this.activeUser.showAll = false
          }
          this.initPage()
        }
        this.areaInfo.show = false
      },
      //tab切换重绘echarts图
      handleTabClick(name, title) {
        if (name == 'electricA') {
          let data = JSON.parse(JSON.stringify(this.electricTab.barData.data))
          this.electricTab.barData.data = []
          this.electricTab.barData.data = JSON.parse(JSON.stringify(data))
        } else if (name == 'electricB') {
          let data = JSON.parse(JSON.stringify(this.electricTab.lineData.data))
          this.electricTab.lineData.data = []
          this.electricTab.lineData.data = JSON.parse(JSON.stringify(data))
        } else if (name == 'portA') {
          let data = JSON.parse(JSON.stringify(this.portTab.barData.data))
          this.portTab.barData.data = []
          this.portTab.barData.data = JSON.parse(JSON.stringify(data))
        } else if (name == 'portB') {
          let data = JSON.parse(JSON.stringify(this.portTab.lineData.data))
          this.portTab.lineData.data = []
          this.portTab.lineData.data = JSON.parse(JSON.stringify(data))
        } else if (name == 'userA') {
          let data = JSON.parse(JSON.stringify(this.userTab.barData.data))
          this.userTab.barData.data = []
          this.userTab.barData.data = JSON.parse(JSON.stringify(data))
        } else if (name == 'userB') {
          let data = JSON.parse(JSON.stringify(this.userTab.lineData.data))
          this.userTab.lineData.data = []
          this.userTab.lineData.data = JSON.parse(JSON.stringify(data))
        } else if (name == 'avatarA') {
          let data = JSON.parse(JSON.stringify(this.avatarTab.barData.data))
          this.avatarTab.barData.data = []
          this.avatarTab.barData.data = JSON.parse(JSON.stringify(data))
        } else if (name == 'avatarB') {
          let data = JSON.parse(JSON.stringify(this.avatarTab.lineData.data))
          this.avatarTab.lineData.data = []
          this.avatarTab.lineData.data = JSON.parse(JSON.stringify(data))
        }
      },
      //获得充电日报1-5数据
      chargingDay() {
        let params = {
          areaId: this.areaInfo.selectId,
          stateDate: this.datePicker.selectDate
        }
        this.port[0].num = ''
        this.port[1].num = ''
        this.user[0].num = ''
        this.user[1].num = ''
        this.user[2].num = ''
        this.avatar[0].num = ''
        this.avatar[0].percentage = ''
        this.avatar[1].num = ''
        this.electric[0].num = ''
        this.electric[0].percentage = ''
        this.electric[1].num = ''
        this.electric[1].percentage = ''
        this.electric[2].num = ''
        this.electric[2].percentage = ''
        this.electric[3].num = ''
        this.electric[3].percentage = ''
        this.electric[4].num = ''
        this.electric[4].percentage = ''
        this.electric[5].num = ''
        this.electric[5].percentage = ''
        this.portSum[0].num = ''
        this.portSum[0].percentage = ''
        this.portSum[1].num = ''
        this.portSum[1].percentage = ''
        this.chargingDayLoading = true
        this.$http
          .post('api/charging/chargingday', params)
          .then(res => {
            let data = res.chargingdayList[0]
            this.port[0].num = data.COUNT1
            this.port[1].num = data.COUNT2
            this.user[0].num = data.COUNT3
            this.user[1].num = data.COUNT4
            this.user[2].num = data.COUNT5
            this.avatar[0].num = data.COUNT6
            this.avatar[0].percentage = data.COUNT7
            this.avatar[1].num = data.COUNT8
            this.electric[0].num = data.COUNT9
            this.electric[0].percentage = data.COUNT10
            this.electric[1].num = data.COUNT11
            this.electric[1].percentage = data.COUNT12
            this.electric[2].num = data.COUNT13
            this.electric[2].percentage = data.COUNT14
            this.electric[3].num = data.COUNT15
            this.electric[3].percentage = data.COUNT16
            this.electric[4].num = data.COUNT17
            this.electric[4].percentage = data.COUNT18
            this.electric[5].num = data.COUNT19
            this.electric[5].percentage = data.COUNT20
            this.portSum[0].num = data.COUNT21
            this.portSum[0].percentage = data.COUNT22
            this.portSum[1].num = data.COUNT23
            this.portSum[1].percentage = data.COUNT24
            this.chargingDayLoading = false
          })
      },
      //获得柱图数据
      chargingHistor() {
        let params = {
          areaId: this.areaInfo.selectId,
          stateDate: this.datePicker.selectDate
        }
        this.barLoading = true
        this.electricTab.barData.data = []
        this.portTab.barData.data = []
        this.userTab.barData.data = []
        this.avatarTab.barData.data = []
        this.$http
          .post('api/charging/chargingHistor', params)
          .then(res => {
            res.chargingHistor1.forEach(item => {
              this.electricTab.barData.data.push({
                date: item.COL1,
                value: parseFloat(item.COL2).toFixed(2)
              })
            })
            res.chargingHistor2.forEach(item => {
              this.portTab.barData.data.push({
                date: item.COL1,
                value: item.COL2
              })
            })
            res.chargingHistor3.forEach(item => {
              this.userTab.barData.data.push({
                date: item.COL1,
                value: item.COL2
              })
            })
            res.chargingHistor4.forEach(item => {
              this.avatarTab.barData.data.push({
                date: item.COL1,
                value: item.COL2
              })
            })
            this.barLoading = false
          })
      },
      //获得折线图数据
      chargingLine() {
        let params = {
          areaId: this.areaInfo.selectId,
          stateDate: this.datePicker.selectDate
        }
        this.lineLoading = true
        this.electricTab.lineData.data = []
        this.portTab.lineData.data = []
        this.userTab.lineData.data = []
        this.avatarTab.lineData.data = []
        this.$http
          .post('api/charging/chargingLine', params)
          .then(res => {
            res.lineList.forEach(item => {
              this.electricTab.lineData.data.push({
                date: item.date,
                value: parseFloat(item.zcol1).toFixed(2)
              })
            })
            res.lineList1.forEach(item => {
              this.portTab.lineData.data.push({
                date: item.date,
                value: item.zcol1
              })
            })
            res.lineList2.forEach(item => {
              this.userTab.lineData.data.push({
                date: item.date,
                value: item.zcol1
              })
            })
            res.lineList3.forEach(item => {
              this.avatarTab.lineData.data.push({
                date: item.date,
                value: item.zcol1
              })
            })
            this.lineLoading = false
          })
      },
      //获得排名情况
      chargingOperating() {
        let params = {
          areaId: this.areaInfo.selectId,
          stateDate: this.datePicker.selectDate
        }
        this.portRank.barData.data = []
        this.activeUser.barData.data = []
        this.$http
          .post('api/charging/chargingOperating', params)
          .then(res => {
            this.portRank.barData.role = this.roleType
            this.activeUser.barData.role = this.roleType
            res.chargingHistor1.forEach(item => {
              if(item.PROVINCE == this.areaInfo.selectId) {
                this.portRank.barData.data.push({
                  name: item.COL1,
                  value: item.COL2,
                  count: item.COUNT,
                  current: true
                })
              } else {
                this.portRank.barData.data.push({
                  name: item.COL1,
                  value: item.COL2,
                  count: item.COUNT,
                  current: false
                })
              }
            })
            res.chargingHistor2.forEach(item => {
              if(item.PROVINCE == this.areaInfo.selectId) {
                this.activeUser.barData.data.push({
                  name: item.COL1,
                  value: item.COL2,
                  count: item.COUNT,
                  current: true
                })
              } else {
                this.activeUser.barData.data.push({
                  name: item.COL1,
                  value: item.COL2,
                  count: item.COUNT,
                  current: false
                })
              }
            })
          })
      },
      initPage() {
        this.chargingDay()
        this.chargingHistor()
        this.chargingLine()
        this.chargingOperating()
      },
    },
    mounted() {
      this.$refs.main.addEventListener('scroll', this.handleScroll)
      this.getAreaInfo()
      this.getMaxMinMonth().then(res => {
        if (res == 'ok') {
          this.initPage()
        }
      })
    },
    beforeRouteLeave (to, from, next) {
      if (to.name != 'ReportFormChargeForm') {
        sessionStorage.removeItem('formCharge')
      }
      next()
    }
  }
</script>

<style lang="scss" scoped>
  .title-bg {
    line-height: 1.4;
    padding-top: 18px;
    box-sizing: border-box;
    font-size: 18px;
  }

  .title-tip {
    padding: 2px 10px 0;
    font-size: 12px;
  }

  .selects-wrap {
    padding: 4px 10px 4px 70px;
    background: #f4f4f4;

    .selects {
      margin-bottom: 0;
      border: 0;

      &__item {
        border: 0;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          width: 1px;
          height: 12px;
          top: 50%;
          margin-top: -6px;
          background: #e7e7e7;
        }

        &:first-child {
          &::before {
            display: none;
          }
        }
      }
    }
  }

  .top-menu {
    float: left;
    background: #FF4B47;
    line-height: 26px;
    padding: 0 26px 0 10px;
    color: #fff;
    border-radius: 4px;
    position: relative;
    margin: 2px 0 0 -60px;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 10px;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }

    &::before {
      height: 8px;
      border-top: 1px solid;
      border-bottom: 1px solid;
    }

    &::after {
      height: 1px;
      background: #fff;
    }
  }

  .charge-title {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold;

    &__num {
      font-size: 24px;
      color: #FE786D;
      position: relative;
      display: inline-block;
      margin-right: 5px;

      &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 5px;
        background: #FEC7C6;
        left: 50%;
        margin-left: -10px;
        bottom: 5px;
      }

      span {
        position: relative;
      }
    }

    &__btn {
      width: 20px;
      height: 20px;
      background: url(~@/assets/images/icon-help.png) no-repeat center;
      background-size: 80% 80%;
      border: 0;
      outline: none;
      padding: 0;
      vertical-align: text-bottom;
    }
  }

  .charge-panel {
    border-radius: 5px;
    padding: 0 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

    .van-loading {
      display: inline-block;
    }

    &__item {
      padding: 18px 0 18px 34px;
      position: relative;

      & + & {
        border-top: 1px solid #E5E5E5;
      }

      &::before {
        content: "";
        position: absolute;
        width: 28px;
        height: 28px;
        left: 0;
        top: 18px;
        background-size: 100% 100%;
      }

      @each $icon in portNew, portTotal,
      userNew, userMonth, userTotal,
      avatarNew, avatarTotal,
      electric {
        &--#{$icon}::before {
          background-image: url(~@/assets/images/refortForm/icon-#{$icon}.png);
        }
      }

      &--portSum {
        padding-left: 65px;

        &::before {
          width: 50px;
          height: 40px;
          background-image: url(~@/assets/images/dailyPaper/icon-chart.png);
        }
      }
    }

    &__parts {
      display: flex;
      align-items: center;
    }

    &__part {
      flex: 1;

      &--none {
        flex: none;
      }
    }

    &__num {
      font-size: 18px;
      color: #333;
      font-weight: bold;
    }

    &__info {
      margin-top: 5px;
    }

    &__tip {
      font-size: 12px;
      color: #666;
    }

    &__unit {
      font-size: 12px;
    }
  }

  .go-top {
    position: fixed;
    bottom: 60px;
    right: 15px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    background: #FF4B47;

    &::before {
      content: "";
      display: block;
      width: 35px;
      height: 35px;
      background: url(~@/assets/images/icon-up.png) no-repeat center center;
      background-size: 70% 70%;
    }
  }

  .icon {
    &-top,
    &-label {
      display: inline-block;
      vertical-align: top;
      width: 1.5em;
      height: 1.5em;
    }

    &-top {
      background: url(~@/assets/images/icon-label.png) no-repeat center center;
      background-size: 70% 70%;
    }

    &-label {
      background: url(~@/assets/images/icon-label1.png) no-repeat center center;
      background-size: 70% 70%;
    }
  }

  .chart-wrap {
    height: 200px;
    position: relative;

    &__loading {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding-top: 80px;
      background: #fff;
    }
  }
</style>
